<!-- 车辆维修 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #bindOrder="{ record }">
        <div v-if="record.orderNo">
          <a-link type="link" @click="() => onLink(record)">{{ record.orderNo }}</a-link>
          <div>交车人：{{ record.giveStaffName || '-' }}</div>
        </div>
        <span v-else>-</span>
      </template>
      <template #memberInfo="{ record }">
        <memberInfo :record="record" />
      </template>
    </table-index>
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/inspection/importExcel" download-import="carInspection" @ok="loadData" />
</template>

<script setup name="CarInspectList">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getCarInspectList, exportInspect, closeInspect } from '@/api/asset/carInspect'
  import { useExport } from '@/hooks/list'
  import { Modal, Notification } from '@arco-design/web-vue'
  import memberInfo from '@/views/assets/compnoents/memberInfo.vue'
  import useNavigate from '@/hooks/useNavigate'
  import dayjs from 'dayjs'

  const { navigateTo } = useNavigate()

  const imoportRef = ref(null)
  const dict = usePageDict('carInspectDict')
  // 查询条件
  const searchList = computed(() => {
    return [
      {
        label: '车牌号',
        prop: 'searchLicenseNo',
        type: 'a-input',
        change: (value) => {
          if (!value) {
            queryParam.searchLicenseNo = undefined
          }
        },
      },
      {
        label: '车辆当前归属门店',
        prop: 'carSiteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '年检状态',
        prop: 'inspectionStatusList',
        type: 'a-select',
        options: dict.inspectionStatus,
        attrs: {
          multiple: true,
        },
      },
      {
        label: '下一次年检日期',
        prop: 'nextInspectionDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.planTimeStart = value[0]
          queryParam.planTimeEnd = value[1]
        },
      },
      {
        label: '年检单关联门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '负责人',
        prop: 'undertakerIdList',
        type: 'remote-select',
        attrs: {
          type: 'staff_authOrg_multiple',
        },
      },
      {
        label: '车架号',
        prop: 'searchVin',
        type: 'a-input',
        change: (value) => {
          if (!value) {
            queryParam.searchVin = undefined
          }
        },
      },
      {
        label: '年检厂',
        prop: 'locationId',
        type: 'remote-select',
        attrs: {
          type: 'supplier_list',
          params: {
            status: 1,
            supplierType: 6,
          },
        },
      },
      { label: '关联单号', prop: 'orderNoLike', type: 'a-input', maxlength: 100 },
      {
        label: '入厂日期',
        prop: 'inDateDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.inDateStart = value[0]
          queryParam.inDateEnd = value[1]
        },
      },
      {
        label: '出厂日期',
        prop: 'onDateDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.onDateStart = value[0]
          queryParam.onDateEnd = value[1]
        },
      },
    ]
  })

  const queryParam = reactive({
    queryDate: [],
    nextInspectionDate: [],
  })
  const onLink = (record) => {
    if (record.orderType == 3) {
      navigateTo(`/long-order/detail/${record.businessOrderId}`, `${record.orderNo}-长租详情`)
    } else if (record.orderType == 2) {
      navigateTo(`/short-order/detail/${record.businessOrderId}`, `${record.orderNo}-短租详情`)
    }
  }
  // table 配置
  const table = useTable({
    queryParam,
    columns: [
      { title: '年检单号', dataIndex: 'inspectionNo', width: 150, fixed: 'left' },
      { title: '车牌号', dataIndex: 'licenseNo' },
      { title: '车辆当前归属门店', dataIndex: 'carSiteName', width: 150 },
      { title: '年检单关联门店', dataIndex: 'siteName', width: 150 },
      {
        title: '入厂时间',
        dataIndex: 'inspectionTime',
        width: 175,
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      {
        title: '出厂时间',
        dataIndex: 'expectInspectionTime',
        width: 175,
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      { title: '下一次年检日期', dataIndex: 'planTime', width: 170 },
      { title: '关联单号', dataIndex: 'order', slotName: 'bindOrder', width: 240 },
      { title: '承租人信息', dataIndex: 'memberInfo', slotName: 'memberInfo', width: 120 },
      { title: '年检厂', dataIndex: 'location' },
      { title: '费用金额', unit: '元', dataIndex: 'inspectionAmount', width: 110 },
      { title: '年检状态', dataIndex: 'inspectionStatusName', width: 100 },
      { title: '负责人', dataIndex: 'undertaker', width: 120 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:asstes:operation:car-inspect.detail',
        method: (record) => {
          navigateTo(
            `/car-inspect/detail/${record.id}?inspectionStatus=${record.inspectionStatus}&produceWay=${record.produceWay}`,
            `${record.licenseNo}-年检详情`
          )
        },
      },
      {
        label: '编辑',
        permission: 'svms:asstes:operation:car-inspect.edit',
        // 状态为【待年检】、【年检中】
        show: (record) => record.inspectionStatus == 0 || record.inspectionStatus == 2 || record.inspectionStatus == 1,
        method: (record) => {
          // 0 待年检 2 年检中 1 年检完成 3 已关闭
          if (record.inspectionStatus === 1) {
            navigateTo(`/car-inspect/edit/${record.id}?page=carInspect&flag=finish`, `${record.licenseNo}-年检编辑`)
          } else if (record.inspectionStatus === 2) {
            navigateTo(`/car-inspect/edit/${record.id}?page=carInspect&flag=start`, `${record.licenseNo}-年检编辑`)
          } else {
            navigateTo(`/car-inspect/edit/${record.id}?page=carInspect&flag=edit`, `${record.licenseNo}-年检编辑`)
          }
        },
      },
      {
        label: '费用信息',
        permission: 'svms:asstes:operation:car-inspect.fee',
        show: (record) => record.inspectionStatus == 1 && record.produceWay != 30,
        method: (record) => {
          navigateTo(
            `/car-inspect/detail/${record.id}?activeType=${2}&inspectionStatus=${record.inspectionStatus}&produceWay=${record.produceWay}`,
            `${record.licenseNo}-费用信息`
          )
        },
      },
      {
        label: '开始年检',
        permission: 'svms:asstes:operation:car-inspect.start',
        // 状态为【待年检】
        show: (record) => record.inspectionStatus == 0,
        method: (record) => {
          navigateTo(`/car-inspect/edit/${record.id}?page=carInspect&flag=start`, `${record.licenseNo}-开始年检`)
        },
      },
      {
        label: '年检完成',
        permission: 'svms:asstes:operation:car-inspect.end',
        // 状态为【年检中】
        show: (record) => record.inspectionStatus == 2,
        method: (record) => {
          navigateTo(`/car-inspect/edit/${record.id}?page=carInspect&flag=end`, `${record.licenseNo}-年检完成`)
        },
      },
      {
        label: '关闭',
        permission: 'svms:asstes:car:car-inspect.close',
        show: (record) => record.inspectionStatus == 0 || record.inspectionStatus == 2,
        method: (record) => {
          Modal.confirm({
            title: '关闭年检单',
            cancelText: '取消',
            okText: '确认',
            bodyStyle: {
              'text-align': 'center',
            },
            content: '关闭后，不支持恢复，是否确认关闭？',
            onOk: () => {
              closeInspect({ id: record.id }).then(() => {
                Notification.success({
                  content: '关闭成功',
                  closable: true,
                  duration: 3000,
                })
                loadData()
              })
            },
          })
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:operation:car-inspect.operaterecords',
        method: (record) => {
          navigateTo(
            `/car-inspect/detail/${record.id}?activeType=${3}&inspectionStatus=${record.inspectionStatus}&produceWay=${record.produceWay}`,
            `${record.licenseNo}-操作记录`
          )
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:asstes:operation:car-inspect.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:asstes:operation:car-inspect.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        label: '新增',
        permission: 'svms:asstes:operation:car-inspect.create',
        method: () => {
          navigateTo('/car-inspect/create')
        },
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarInspectList)

  // 导出事件
  const handleExport = () => {
    useExport(exportInspect, queryParam)
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped></style>
